<label class="acc-label mt-5">
  {{t "cloudProvider.title"}}
  {{!-- <span class="text-info">{{t "cloudProvider.helpText" htmlSafe=true}}</span> --}}

  <span class="inline-block">
    {{#tooltip-element
       type="tooltip-basic"
       model=(t "cloudProvider.helpText" htmlSafe=true)
       tooltipTemplate="tooltip-static"
       aria-describedby="tooltip-base"
       tooltipFor="tooltipPoolCreateAfter"
       placement="top"
       tagName="div"
    }}
      <i class="icon icon-help icon-blue"></i>
    {{/tooltip-element}}
  </span>
</label>

{{#if (and (eq driver "custom") (eq selectedCloudProvider "none"))}}
  {{#if (not-eq mode "view")}}
    <div class="col span-12">
      <BannerMessage
        @color="bg-info mt-0 mb-0"
        @icon="icon-info"
        @message={{t "cloudProvider.custom.notInList" htmlSafe=true}}
      />
    </div>
  {{/if}}
{{/if}}

<div class="row">
  <CheckComputedOverride
    @applyClusterTemplate={{applyClusterTemplate}}
    @clusterTemplateCreate={{clusterTemplateCreate}}
    @computedOverrideAllowed={{selectedCloudProviderOverrideAvailable}}
    @selectedCloudProvider={{mut selectedCloudProvider}}
    @driver={{mut driver}}
    @isCreateClusterOrClusterTemplate={{isCreateClusterOrClusterTemplate}}
    @computedState={{not (eq selectedCloudProvider "none")}}
  >
    {{#if showChangedToExternal}}
      <div class="col span-12">
        <BannerMessage
          @color="bg-warning mt-0 mb-0"
          @icon="icon-alert"
          @message={{t "cloudProvider.azureUnsupported" htmlSafe=true}}
        />
      </div>
    {{/if}}
  
    {{#input-or-display
       editable=(or (and (eq mode "new") (or (not applyClusterTemplate) (and (eq mode "new") selectedCloudProviderOverrideAvailable))) canEditProvider)
       value=selectedCloudProvider
    }}
      <div class="col span-6">
        {{#if (and applyClusterTemplate (eq selectedCloudProvider "none"))}}
          <div class="radio">
            <label>
              {{t "generic.none"}}
            </label>
          </div>
        {{else if isCreateClusterOrClusterTemplate}}
          <div class="radio">
            <label>
              {{radio-button
                selection=selectedCloudProvider
                value="none"
                chosen=(action cloudProviderUserChange)
              }} {{t "generic.none"}}
            </label>
          </div>
        {{/if}}
        {{#if (or (eq driver "amazonec2") (eq driver "custom"))}}
          {{#if (and applyClusterTemplate (eq selectedCloudProvider "amazonec2"))}}
            <div class="radio">
              <label>
                {{t "cloudProvider.amazon"}}
              </label>
            </div>
          {{else if isCreateClusterOrClusterTemplate}}
            {{#if awsSupported}}
              <div class="radio">
                <label>
                  {{radio-button
                    selection=selectedCloudProvider
                    value="amazonec2"
                    chosen=(action cloudProviderUserChange)
                  }} {{t "cloudProvider.amazon"}}
                </label>
              </div>
            {{/if}}
          {{/if}}
        {{/if}}
        {{#if (or (eq driver "azure") (eq driver "custom"))}}
          {{#if (and applyClusterTemplate (eq selectedCloudProvider "azure"))}}
            <div class="radio">
              <label>
                {{t "cloudProvider.azure"}}
              </label>
            </div>
          {{else if (and isCreateClusterOrClusterTemplate isAzureInTreeSupported)}}
            <div class="radio">
              <label>
                {{radio-button
                  selection=selectedCloudProvider
                  value="azure"
                }} {{t "cloudProvider.azure"}}
              </label>
            </div>
          {{/if}}
        {{/if}}

        {{#if (eq driver "harvester")}}
          {{#if (and applyClusterTemplate (eq selectedCloudProvider "harvester"))}}
            <div class="radio">
              <label>
                {{t "cloudProvider.harvester.label"}}
              </label>
            </div>
          {{else if isCreateClusterOrClusterTemplate}}
            <div class="radio">
              <label style={{if harvesterCloudProviderDisabled "color: #adaeb4"}}>
                {{radio-button
                  selection=selectedCloudProvider
                  value="harvester"
                  disabled=harvesterCloudProviderDisabled
                }} 
                {{t "cloudProvider.harvester.label"}}
                {{#if harvesterCloudProviderDisabled}}
                  <span class="inline-block">
                    {{#tooltip-element
                      type="tooltip-basic"
                      model=(t "cloudProvider.harvester.helpText" htmlSafe=true)
                      tooltipTemplate="tooltip-static"
                      aria-describedby="tooltip-base"
                      tooltipFor="tooltipPoolCreateAfter"
                      placement="top"
                      tagName="div"
                    }}
                      <i class="icon icon-help icon-blue"></i>
                    {{/tooltip-element}}
                  </span>
                {{/if}}
              </label>
            </div>
          {{/if}}
        {{/if}}

        {{#if (and (not-eq driver "amazonec2") (not-eq driver "azure") (not-eq driver "harvester"))}}
          {{#if (and applyClusterTemplate (eq selectedCloudProvider "generic"))}}
            <div class="radio">
              <label>
                {{t "cloudProvider.custom.label"}}
              </label>
            </div>
          {{else if isCreateClusterOrClusterTemplate}}
            <div class="radio">
              <label>
                {{radio-button
                  selection=selectedCloudProvider
                  value="generic"
                }} {{t "cloudProvider.custom.label"}}
              </label>
            </div>
          {{/if}}
        {{/if}}

        {{#if (or (eq driver "amazonec2") (eq driver "custom"))}}
          {{#if (and applyClusterTemplate (eq selectedCloudProvider "external-aws"))}}
            <div class="radio">
              <label>
                {{t "cloudProvider.externalAmazon.label"}}
              </label>
            </div>
          {{else if isCreateClusterOrClusterTemplate}}
              <div class="radio">
                <label>
                  {{radio-button
                    selection=selectedCloudProvider
                    value="external-aws"
                    chosen=(action cloudProviderUserChange)
                  }} {{t "cloudProvider.externalAmazon.label"}}
                </label>
              </div>
          {{/if}}
        {{/if}}


        {{#if (and applyClusterTemplate (eq selectedCloudProvider "external"))}}
          <div class="radio">
            <label>
              {{t "cloudProvider.external.label"}}
            </label>
          </div>
        {{else if isCreateClusterOrClusterTemplate}}
          <div class="radio">
            <label>
              {{radio-button
                selection=selectedCloudProvider
                value="external"
                chosen=(action cloudProviderUserChange)
              }} {{t "cloudProvider.external.label"}}
            </label>
          </div>
        {{/if}}
      </div>
    {{/input-or-display}}
  </CheckComputedOverride>
  {{#if showChangedToAmazonExternal}}
    <div class="col span-12">
      <BannerMessage
        @color="bg-info mt-0 mb-0"
        @icon="icon-alert"
        @message={{t "cloudProvider.unsupported"}}
      />
    </div>
  {{/if}}
  {{#if (not-eq selectedCloudProvider "none")}}
    {{#if (eq selectedCloudProvider "external-aws")}}
      <div class="col span-12">
        <BannerMessage
          @color="bg-info mt-0 mb-0"
          @icon="icon-alert"
          @message={{t "cloudProvider.externalAmazon.helpText"}}
        />
      </div>
    {{else }}
      <div class="col span-12">
        <BannerMessage
          @color="bg-info mt-0 mb-0"
          @icon="icon-alert"
          @message={{t "cloudProvider.warning"}}
        />
      </div>
    {{/if}}
  {{/if}}
</div>

{{#if (eq selectedCloudProvider "azure")}}
  {{#each mappedConfigAnswers as |answer|}}
    <div class="row">
      <div class="col span-6">
        <label class="acc-label pb-0">{{answer.key}}
          {{#if (get (get azureDescriptions answer.key) "required")}}
            {{#if (eq mode "new")}}
              {{field-required}}
            {{else if (and (eq mode "edit") (or (not-eq answer.key "aadClientSecret") clusterTemplateCreate))}}
              {{field-required}}
            {{/if}}
          {{/if}}
          {{#if clusterTemplateCreate}}
            <ClusterTemplateOverrideToggle
              @path={{concat "rancherKubernetesEngineConfig.cloudProvider.azureCloudProvider." answer.key}}
              @configVariable={{configVariable}}
              @addOverride={{addOverride}}
              @questions={{questions}}
            />
          {{/if}}
        </label>
        {{#if (get azureDescriptions answer.key)}}
          <p class="help-block mt-0">
            {{t (get (get azureDescriptions answer.key) "description") htmlSafe=true}}
          </p>
        {{/if}}
      </div>
      <div class="col span-6">
        <CheckOverrideAllowed
          @applyClusterTemplate={{applyClusterTemplate}}
          @clusterTemplateRevision={{clusterTemplateRevision.clusterConfig}}
          @paramName={{concat "rancherKubernetesEngineConfig.cloudProvider.azureCloudProvider." answer.key}}
          @questions={{questions}}
        >
          {{#input-or-display
             editable=(not-eq mode "view")
             value=(get configAnswers answer.key)
             obfuscate=(if (eq (get (get azureDescriptions answer.key) "type") "password") true false)
          }}
            {{input
              class="form-control input-sm value"
              spellcheck="false"
              type=(or (get (get azureDescriptions answer.key) "type") "text")
              value=answer.value
              placeholder=(t "generic.value")
            }}
          {{/input-or-display}}
        </CheckOverrideAllowed>
      </div>
    </div>
  {{/each}}
{{/if}}

{{#if (not-eq mode "view")}}
  <p class="text-info">
    {{#if (eq selectedCloudProvider "generic")}}
      {{t "cloudProvider.custom.helpText" htmlSafe=true}}
    {{else if (and (eq selectedCloudProvider "external") (not (eq driver "vmwarevsphere")) )}}
      {{t "cloudProvider.external.helpText" docsBase=settings.docsBase htmlSafe=true}}
    {{/if}}
  </p>
  {{#if showVsphereHelperText}}
    <p class="text-info">
      {{t "cloudProvider.external.vsphereHelpText" docsBase=settings.docsBase htmlSafe=true}}
    </p>
  {{/if}}
{{/if}}